<template>
  <div class="header">
    <div class="return_box" @click="returnBack" v-if="$route.meta.level == 2">
      <i clickVoice="true" class="icon_return"></i>
      <span clickVoice="true">返回</span>
    </div>
    <div class="class_list" v-if="$route.meta.level !== 2">
      <van-dropdown-menu >
        <van-dropdown-item clickVoice="true" @change="changeClass" v-model="subjectPackageId" :options="classList" />
      </van-dropdown-menu>
    </div>
    <!-- <div class="avatar" v-if="$route.meta.level !== 2">
      <img v-if="babyInfo.filesId != ''" :src="`http://39.105.125.149:8060/bmOssFile/viewFile?fileId=${babyInfo.filesId}`" alt="" class="avatar_img">
      <img v-else :src="avatarUrl" alt="" class="avatar_img">
    </div> -->
    
    <!-- <div class="info" v-if="$route.meta.level !== 2">
      <span class="name">{{babyInfo.studentName}}</span>
      <span class="birth">{{computedAge}} 岁</span>
    </div> -->
    <div class="coin">
      <span class="coin_number">{{babyInfo.chuckCurrency}}</span>
    </div>
  </div>
</template>

<script>
import {
  createNamespacedHelpers
} from "vuex";
let {
  mapState,
  mapGetters,
  mapMutations,
  mapActions
} = createNamespacedHelpers("adminBasic");
import defaultAvatar from '../../assets/img/avatar.png';
export default {
  data() {
    return {
      babyInfo: {},
      avatarUrl: defaultAvatar,
      avatarId: '',

      subjectPackageId: '',
      classList: [
      ],
      // option: {
      //   text: 'subjectPackageName',
      //   value: 'subjectPackageId'
      // }
    }
  },

  created() {
    this.initBabyInfo();
  },

  methods: {
    ...mapMutations([
      "updateInfo"
    ]),
    ...mapActions([
      "formGet",
      "post"
    ]),
    
    initBabyInfo() {
      this.formGet({
        API: 'queryStudentByOpenId',
        data: {
          openId: this.$route.params.openId
        }
      }).then(res => {
        // console.log(res);
        this.babyInfo = res;
        this.classList = this.babyInfo.bmOnlineSubjectPackages
        this.classList.forEach(item => {
          item.text = item.subjectPackageName
          item.value = item.subjectPackageId
        })

        let localId = localStorage.getItem('subjectPackageId')
        this.subjectPackageId = localId || this.classList[0].subjectPackageId
      }).catch(err => {

      })
    },

    changeClass(e) {
      // console.log(e);
      this.$emit('classChange', e)
      localStorage.setItem('subjectPackageId', e)
      // this.updateInfo(['subjectPackageId', e])
    },

    toDetail() {
      this.$router.push({
        name: 'taskDetail'
      })
    },
    returnBack() {
      this.$router.go(-1)
    },
  },

  computed: {
    computedAge() {
      let timestamp = parseInt(new Date().getTime() / 1000); // 当前时间戳 毫秒
      // console.log(timestamp)
      let birthTimestamp = new Date(this.babyInfo.birthday).getTime() / 1000;
      // console.log(birthTimestamp)

      let diff = parseInt((Number(timestamp) - Number(birthTimestamp)) / 2592000);
      return parseInt(diff / 12)
    }
  }
}
</script>

<style>
.header .van-hairline--top-bottom::after {
  border: none;
}
.header .van-cell {
  justify-content: space-between;
}
.header .van-cell__title, .van-cell__value {
  flex: none;
}
.header .van-dropdown-menu {
  background: none;
  border: none;
}
.header .van-dropdown-menu__title::after {
  content: '';
  display: inline-block;
  background: url('../../assets/img/icon_down.png') 0 0 no-repeat;
  background-size: contain;
  width: .413333rem;
  height: .413333rem;
  right: -11px;
  transform: translateY(-50%);
  margin-top: 0px;
  border: none;
}
.header .van-dropdown-menu__title--active, .van-dropdown-item__option--active {
  color: #333 !important;
}
.header .van-ellipsis {
  font-size: .4rem;
  color: #333 !important;
  font-weight: bold;
}
.header .van-cell {
  padding: 10px 16px 10px 22px;
}
</style>
<style scoped>
.header {
  width: 100%;
  height: 1.6rem;
  background: #ffd33d;
  box-shadow:0px 1px 2px 1px rgba(194,192,192,0.5);
  display: flex;
  align-items: center;
  padding: 0 0 0 .303333rem;
  box-sizing: border-box;
}

.header .avatar {
  width: .986667rem;
  height: .986667rem;
  border-radius: 50%;
  overflow: hidden;
}
.header .avatar img {
  width: 100%;
}
.header .info {
  margin-left: .266667rem;
}
.header .info span {
  display: block;
  font-size: .346667rem;
  color: #333;
}

</style>